<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Create an event program with the streamer component. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Streamer - Metro 4 :: Popular HTML, CSS and JS library</title>

    <style>
        body.noScroll {
            overflow: hidden;
        }
    </style>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Streamer</a></li>
                    <li class="toc-entry"><a href="#_streamer_about">About</a></li>
                    <li class="toc-entry"><a href="#_streamer_create">Create streamer</a></li>
                    <li class="toc-entry"><a href="#_streamer_options">Options</a></li>
                    <li class="toc-entry"><a href="#_streamer_data">Streamer data</a></li>
                    <li class="toc-entry"><a href="#_streamer_methods">Methods</a></li>
                    <li class="toc-entry"><a href="#_streamer_responsive">Responsive</a></li>
                    <li class="toc-entry"><a href="#_streamer_observe">Observe</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Streamer</h1>
                <p class="text-leader">
                    Create an event program with the streamer component. Metro 4 contains css classes and plugin to create streamer component.
                </p>

                <!-- ads-html -->

                <h3 id="_streamer_about">About</h3>
                <p>
                    Streamer is a complex element for creating an event program. The component includes a special HTML structure, styles, and a javascript code to interact with this structure.
                </p>

                <div class="example mt-3 p-0 no-border">
                    <div id="streamer" class="streamer-expand-sm" data-role="streamer" data-source="data/streamer_data.json" data-start-from="09:00" data-slide-to-start="true" data-stream-select="true"></div>
                </div>

                <h3 id="_streamer_create">Create streamer</h3>
                <p>
                    To create streamer you must execute three steps: add container with <code>data-role="streamer"</code> attribute, then define other options over <code>data-*</code> attributes and
                    define streamer data with <code>data-source</code> or <code>data-data</code> attributes. Also you must define <code>id</code> attribute for your streamer.
                </p>
                <pre><code>
                    &lt;div id="streamer"
                         data-role="streamer"
                         data-source="data/streamer_data.json"
                         data-start-from="09:00"
                         data-slide-to-start="false"&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_streamer_options">Options</h3>
                <p>
                    The streamer contains a number of options for defining behavior:
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <td>Option</td>
                        <td>Data-*</td>
                        <td>Default</td>
                        <td>Desc</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>defaultClosedIcon</td>
                        <td>data-default-closed-icon</td>
                        <td></td>
                        <td>Default icon for closed event</td>
                    </tr>
                    <tr>
                        <td>defaultOpenIcon</td>
                        <td>data-default-open-icon</td>
                        <td></td>
                        <td>Default icon for open event</td>
                    </tr>
                    <tr>
                        <td>changeUri</td>
                        <td>data-change-uri</td>
                        <td>true</td>
                        <td>If true, browser url will be changed when event selected</td>
                    </tr>
                    <tr>
                        <td>encodeLink</td>
                        <td>data-encode-link</td>
                        <td>true</td>
                        <td>If true, streamer link will be encoded with Base64</td>
                    </tr>
                    <tr>
                        <td>closed</td>
                        <td>data-closed</td>
                        <td>false</td>
                        <td>Streamer is closed. Event are not can be selected</td>
                    </tr>
                    <tr>
                        <td>startFrom</td>
                        <td>data-start-from</td>
                        <td>null</td>
                        <td>Streamer can be slided to this time pint after create</td>
                    </tr>
                    <tr>
                        <td>slideToStart</td>
                        <td>data-slide-to-start</td>
                        <td>false</td>
                        <td>If true, Streamer will be slided to time pint defined in startFrom options after create</td>
                    </tr>
                    <tr>
                        <td>startSlideSleep</td>
                        <td>data-start-slide-sleep</td>
                        <td>1000</td>
                        <td>Timeout before sliding to start time point</td>
                    </tr>
                    <tr>
                        <td>source</td>
                        <td>data-source</td>
                        <td></td>
                        <td>Link to stream data</td>
                    </tr>
                    <tr>
                        <td>data</td>
                        <td>data-data</td>
                        <td></td>
                        <td>Object with stream data</td>
                    </tr>
                    <tr>
                        <td>eventClick</td>
                        <td>data-event-click</td>
                        <td>select</td>
                        <td>Behavior when clicking on a event. This value can be <code>select</code> or <code>click</code></td>
                    </tr>
                    <tr>
                        <td>streamSelect</td>
                        <td>data-stream-select</td>
                        <td>false</td>
                        <td>If true, user can be select one stream on click them and disable others.</td>
                    </tr>
                    <tr>
                        <td>onStreamerCreate</td>
                        <td>data-on-streamer-create</td>
                        <td>Metro.noop</td>
                        <td>Callback</td>
                    </tr>
                    <tr>
                        <td>onStreamClick</td>
                        <td>data-on-stream-click</td>
                        <td>Metro.noop</td>
                        <td>Callback</td>
                    </tr>
                    <tr>
                        <td>onStreamSelect</td>
                        <td>data-on-stream-select</td>
                        <td>Metro.noop</td>
                        <td>Callback</td>
                    </tr>
                    <tr>
                        <td>onEventClick</td>
                        <td>data-on-event-click</td>
                        <td>Metro.noop</td>
                        <td>Callback</td>
                    </tr>
                    <tr>
                        <td>onEventSelect</td>
                        <td>data-on-event-select</td>
                        <td>Metro.noop</td>
                        <td>Callback</td>
                    </tr>
                    </tbody>
                </table>

                <!-- ads-html -->

                <h3 id="_streamer_data">Streamer data</h3>
                <p>
                    An important parameter of the streamer is the parameter that determines the data for the streamer. Data for the <code>streamer</code> can be determined in two ways:
                        <code>data-source=*</code> attribute,
                        <code>data-data=*</code> attribute.
                </p>

                <div class="img-container thumbnail mb-2">
                    <img src="images/streamer.jpg">
                </div>

                <p>
                    Data for a streamer is an object of a certain format. <a href="data/streamer_data.json">This is a link to demo data</a>. This object contains four main section:
                </p>
                <ul>
                    <li><strong>actions</strong> - user defined actions</li>
                    <li><strong>timeline</strong> - timeline definition</li>
                    <li><strong>streams</strong> - streams definition</li>
                    <li><strong>global</strong> - additions events</li>
                </ul>
                <pre><code>
                    {
                        actions: {...}
                        timeline: {...}
                        streams: {...}
                        global: {...}
                    }
                </code></pre>

                <h4 id="_streamer_data_actions">Actions</h4>
                <p>
                    User define action showing in top left corner of streamer and hide when streamer collapsed (default). For details see <a href="#_streamer_responsive">streamer responsive feature</a>.
                    Each action is described by three parameters:
                        <code>html</code> - html value for action,
                        <code>cls</code> - additional classes for action,
                        <code>onclick</code> - click event for action (<a href="events.html">rules for defining events in Metro 4</a>).
                </p>
                <pre><code>
                    {
                        actions: [
                            {
                                html: "&lt;span class='mif-print'&gt;&lt;/span&gt;",
                                cls: "fg-red",
                                onclick: "alert('Printed!!!')"
                            }
                        ]
                    }
                </code></pre>

                <h4 id="_streamer_data_timeline">Timeline</h4>
                <p>
                    To define <code>timeline</code> you can use same name section. This section contains three parameters:
                        <code>start</code> - begin time,
                        <code>stop</code> - end time,
                        <code>step</code> - step in minutes.
                </p>
                <pre><code>
                    {
                        timeline: {
                            start: "09:00",
                            stop: "18:00",
                            step: 20
                        }
                    }
                </code></pre>

                <h4 id="_streamer_data_streams">Streams</h4>
                <p>
                    Streams are defined in <code>streams</code> section. Each <code>stream</code> is described with next parameters:
                        <code>title</code>,
                        <code>secondary</code>,
                        <code>icon</code>,
                        <code>cls</code>,
                        <code>data</code>,
                        <code>events</code>.
                </p>
                <pre><code>
                    {
                        streams: [
                            {
                                title: "Internet business",
                                secondary: "room 1",
                                icon: "<span class='mif-link stream-icon'></span>",
                                cls: "bg-teal fg-white",
                                data: "any data, stored to stream object",
                                events: [...]
                            }
                        ]
                    }
                </code></pre>

                <h5 id="_streamer_data_events">Events</h5>
                <p>
                    Each stream can be contains events. Events is described with next parameters:
                        <code>icon</code>,
                        <code>time</code>,
                        <code>title</code>,
                        <code>subtitle</code>,
                        <code>desc</code>,
                        <code>size</code>,
                        <code>selected</code>,
                        <code>closed</code>,
                        <code>closedIcon</code>,
                        <code>openIcon</code>,
                        <code>clsClosedIcon</code>,
                        <code>clsOpenIcon</code>,
                        <code>data</code>,
                        <code>cls</code>,
                        <code>target</code>,
                        <code>row</code>,
                        <code>html</code>.

                </p>
                <pre><code>
                    {
                        events: [
                            {
                                icon: "images/olshanskysmall.jpg",
                                time: "09:00",
                                title: "Alexandr Olshansky",
                                subtitle: "Internet Invest Group",
                                desc: "Information revolution - the way to new middle ages",
                                size: 1,
                                selected: 0,
                                closed: true,
                                data: {},
                                closedIcon: "&lt;span class='mif-video-camera'&gt;&lt;/span&gt;",
                                openIcon: "&lt;span class='mif-apps'&gt;&lt;/span&gt;",
                                target: "https://2017.iforum.ua/reporter/?id=99#video-365",
                                cls: ""
                            }
                        ]
                    }
                </code></pre>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <td>Param</td>
                        <td>Desc</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>icon</td>
                        <td>html tag for event icon</td>
                    </tr>
                    <tr>
                        <td>time</td>
                        <td>Event time point</td>
                    </tr>
                    <tr>
                        <td>title</td>
                        <td>Event title</td>
                    </tr>
                    <tr>
                        <td>subtitle</td>
                        <td>Event subtitle</td>
                    </tr>
                    <tr>
                        <td>desc</td>
                        <td>Event short description</td>
                    </tr>
                    <tr>
                        <td>size</td>
                        <td>Event size. Can be from 1 to 10</td>
                    </tr>
                    <tr>
                        <td>row</td>
                        <td>Nested row from 1 to ...</td>
                    </tr>
                    <tr>
                        <td>shift</td>
                        <td>Event shift (shift the event to the right of the previous one). Can be from 1 to 10</td>
                    </tr>
                    <tr>
                        <td>selected</td>
                        <td>Event mark as selected. Can be 1 or 0</td>
                    </tr>
                    <tr>
                        <td>closed</td>
                        <td>Event mark as close. Can be 1 or 0</td>
                    </tr>
                    <tr>
                        <td>closedIcon</td>
                        <td>If event is closed, this icon showing on top right corner</td>
                    </tr>
                    <tr>
                        <td>openIcon</td>
                        <td>If event is open, this icon showing on top right corner</td>
                    </tr>
                    <tr>
                        <td>target</td>
                        <td>If event is closed, this param contains target. When user click on closed event browser switched to this target.</td>
                    </tr>
                    <tr>
                        <td>data</td>
                        <td>Any data, can be stored to event</td>
                    </tr>
                    <tr>
                        <td>cls</td>
                        <td>Additional class for event</td>
                    </tr>
                    <tr>
                        <td>clsClosedIcon</td>
                        <td>Additional class for closed event icon</td>
                    </tr>
                    <tr>
                        <td>clsOpenIcon</td>
                        <td>Additional class for open event icon</td>
                    </tr>
                    <tr>
                        <td>html</td>
                        <td>Create event with custom html</td>
                    </tr>
                    </tbody>
                </table>

                <h4 id="_streamer_data_global">Additions Events</h4>
                <p>
                    Before and after main events you can define additional global events. To define global event use section <code>global</code>.
                    Each event in global stream must be described with six parameters:
                        <code>time</code>,
                        <code>size</code>,
                        <code>cls</code>,
                        <code>title</code>,
                        <code>subtitle</code>,
                        <code>html</code>.
                </p>
                <pre><code>
                    {
                        global: {
                            before: [
                                {
                                    time: "08:40",
                                    size: 1,
                                    cls: 0,
                                    title: "Registration",
                                    subtitle: "08:40 - 09:00",
                                    html: "Any valid html code",
                                }
                            ],
                            after: [
                                {
                                    time: "12:00",
                                    size: 2,
                                    cls: "p-2",
                                    title: "Closing ceremony"
                                },
                                {
                                    time: "12:40",
                                    size: 2,
                                    cls: "p-2",
                                    title: "Banquet"
                                }
                            ]
                        }
                    }
                </code></pre>

                <h3 id="_streamer_methods">Methods</h3>
                <p>
                    Streamer contains the numbers of usefulness methods:
                </p>
                <ul>
                    <li><code>getLink()</code> - return link to same streamer with pre-selected events</li>
                    <li><code>getTimes()</code> - return array with time points</li>
                    <li><code>getEvents(type, include_global)</code> - return array with events. Type can be: selected, non-selected or all (default)</li>
                    <li><code>slideTo(time)</code> - slide streamer to required time, time must be string in format HH:MI</li>
                    <li><code>enableStream(stream)</code> - enable stream after it can be disabled</li>
                    <li><code>disableStream(stream)</code> - disable stream</li>
                    <li><code>toggleStream(stream)</code> - toggle stream state</li>
                    <li><code>source(src)</code> - change streamer source and redraw</li>
                    <li><code>data(src)</code> - change streamer data and redraw</li>
                    <li><code>source()</code> - get streamer source</li>
                    <li><code>data()</code> - get streamer data</li>
                    <li><code>getStreamerData()</code> - get streamer internal data</li>
                </ul>

                <!-- ads-html -->

                <h3 id="_streamer_responsive">Responsive</h3>
                <p>
                    On default, streamer showing in collapsed mode:
                </p>
                <div class="example no-border p-0">
                    <div data-role="streamer" data-source="data/streamer_data.json" data-start-from="09:00"></div>
                </div>
                <pre><code>
                    &lt;div data-role="streamer"
                        data-source="data/streamer_data3.json"
                        data-start-from="09:00"&gt;&lt;/div&gt;
                </code></pre>
                <div class="example no-border p-0">
                    <div class="streamer-expand-sm" data-role="streamer" data-source="data/streamer_data.json" data-start-from="09:00"></div>
                </div>
                <pre><code>
                    &lt;div class="streamer-expand-sm"
                        data-role="streamer"
                        data-source="data/streamer_data3.json"
                        data-start-from="09:00"&gt;&lt;/div&gt;
                </code></pre>
                <p>
                    To expand streams markers, add one of classes:
                        <code>.streamer-expand</code>,
                        <code>.streamer-expand-sm</code>,
                        <code>.streamer-expand-md</code>,
                        <code>.streamer-expand-lg</code>,
                        <code>.streamer-expand-xl</code>,
                        <code>.streamer-expand-xxl</code>. See <a href="media.html">media breakpoints</a>.
                </p>

                <h3 id="_streamer_observe">Observe</h3>
                <p>
                    You can change attributes <code>data-source</code>, <code>data-data</code>, <code>data-stream-select</code>  at runtime and streamer will be updated.
                </p>

            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>